<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,height=device-height">
    <link rel="stylesheet" href="<?php echo base_url().'public/home/' ?>css/general.css">
    <link rel="stylesheet" href="<?php echo base_url().'public/home/' ?>css/list.css?v=20210912">
    <script src="<?php echo base_url().'public/home/' ?>js/jquery-2.0.3.min.js"></script>
    <!-- 日期选择控件 -->
    <script src='<?php echo base_url().'public/home/mobile_date/' ?>jdate.min.js'></script>
    <!-- 下拉框 -->
    <?php include_once "public/home/html/mobile_select.php"  ?>
    <title>课堂教学评价列表</title>
</head>

<style>
    .clear{
        clear: both;
    }
    .item{
        background: #fff;
        padding: 5%;
        font-size: 18px;
        color:#616161;
        margin-bottom: 20px;
    }
    .item-title{
        font-size: 20px;
    }
    .item{
        position: relative;
    }
    .item-tip .tag{
        margin: 10px 0 0 10px;
        padding: 1% 3%;
        border-radius: 15px;
        background-color: #f1f1f1;
        width: auto;
        float: left;
        font-size: 16px;
    }
    .item-tip .score{
        top:20px;
        right: 10px;
        position: absolute;
        color: #3577F7;
    }
    .item-tip .score img{
        width: 25px;
        float: left;
    }
    .item .d1{
        font-size: 16px;
        margin-top: 15px;
    }
    .item .d2{
        font-size: 16px;
        text-align: right;
        border-bottom: 1px solid #bfbbbb;
        padding-bottom:7px
    }
    .item .d3{
        color: #000;
        margin-top: 10px;
    }
    .item .d4{
        font-size: 16px;
        word-wrap: break-word;
    }
    .number{
        float: left;
    }
</style>

<body>
    <div class="top">
        <input type="hidden" name="url" id="url"value="<?php echo base_url() ?>">
        <input type="hidden" name="admin_id" id="admin_id"value="<?php echo $_SESSION[SESS_USER_HOME]['id'] ?>">
        <div class='filter'>
            <div class="filter-item">
                <input type="text" id="date" onchange="getList(true)" value="" placeholder="选择日期"><img src="<?php echo base_url().'public/home/' ?>images/drop_down.png" alt="">
            </div>
            
            <!-- 管理员显示 -->
            <?php if($identity==1):?>
            <div class="filter-item">
                <input type="text" id="dept" onchange="getList(true)" placeholder="选择部门" readonly><img src="<?php echo base_url().'public/home/' ?>images/drop_down.png" alt="">
            </div>
            <?php endif?>
            <div class="filter-item">
                <input type="text" id="listen_type" onchange="getList(true)" placeholder="听课类型" readonly><img src="<?php echo base_url().'public/home/' ?>images/drop_down.png" alt="">
            </div>
            <div class="filter-item">
                <input type="text" id="type_char" onchange="getList(true)" placeholder="听课督导类型" readonly><img src="<?php echo base_url().'public/home/' ?>images/drop_down.png" alt="">
                <input type="hidden" id="type" >
            </div>
        </div>
    </div>
    <div class="min">
    </div>

    <div class="loading" style="text-align:center;"><img src="<?php echo base_url().'public/home/' ?>images/loading1.gif"></div>
    <div class="tip" style="display: none;">到底了,没有数据了~</div>

    <script>

        
        let pageNo = 1;
        let pageSize = 20;
        let have = true;

        $(function () {
        console.log(pageNo);
        console.log(pageSize);
        getList();
        getOption()
        // 初始化日期控件
        new Jdate({
			  el: '#date',
			  format: 'YYYY-MM-DD',
			  beginYear: 2019,
			  endYear:  new Date().getFullYear(),              
				confirm: function(date) {
					$("#date").val(date)
                    getList(true)
                    
				},
			})


            //分页
        $(window).scroll(function(){
            // scroll at bottom
            console.log($(window).scrollTop() );
            console.log( $(window).height());
            console.log( $(document).height());
            if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                pageNo++;
                getList()
            }
        });
    })

        function getList(change=false){
            if(change){
            pageNo=1
            have=true
            $(".min").html('')
          }
          var date=$("#date").val() 
           if($("#date").val()=='请选择日期'){
            date='';
            
          }
          
            // $('.min').empty()//清空原有数据
            
           console.log(date);    
            $.ajax({
                type: "post",
                url: $("#url").val()+"/Home/Attend/teachingEvaluationList",
                data: {
                    pageNo: pageNo,
                    pageSize: pageSize,
                    admin_id: $("#admin_id").val(),
                    type:$("#type").val(),
                    course_units:$("#dept").val(),
                    listen_type:$("#listen_type").val(),
                    created:date
                },
                dataType: "json",
                success: function (data) {
                    let t=JSON.parse(data.v)
                    console.log("getList t",t);

                            if(status = false){

                               $(".loading").hide();
                                $(".tip").show();

                            }else if(status = true){

                                if(t.count==0){
                                    $(".loading").hide();
                                    $(".tip").show();
                                    return
                                }
                                var html=''
                                $.each(t.ret,function(k,ret){
                                    //  console.log(ret);

                                    let a = (pageNo-1)*pageSize+(k+1) + '.' ;
                                    // console.log(a);
                                    html+=`<div class="item">
                                            <div class="item-title">${a}${ret.class_name}</div>
                                            <div class="item-tip">
                                                <div class="tag">${ret.listen_type}</div>
                                                <div class="tag">${ret.attendType}</div>
                                                <div class="score">
                                                    <img src="<?php echo base_url().'public/home/' ?>images/score.png">
                                                    <div class="number">${ret.score}</div>分
                                                </div>
                                            </div>
                                            <div class="clear"></div>
                                            <div class="d1">${ret.course_units} ${ret.teacher_code}${ret.teacher_name}</div>
                                            <div class="d2">听课督导：${ret.listen_name}</div>
                                            <div class="d3">意见建议</div>
                                            <div class="d4">${ret.advice}</div>
                                        </div>`
                                        if( pageNo==t.totalPage){
                                            have=false
                                            $(".loading").hide();
                                            $(".tip").show();
                                        }

                                })
                                $('.min').append(html);
                                    
                            }

                                 
                    
                        
                }
                
            });
        }


    function detail (aid){
        console.log(aid);
        window.location.href = `<?php echo base_url() . 'Home/Attend/details/'?>${aid}`;
    }
    // 获取筛选项
    function getOption(){
        $.ajax({
            type: "post",
            url: $("#url").val()+"Home/Attend/teachingScreen",
            dataType: "json",
            success: function (data) {
                var t=JSON.parse(data.v)
                console.log(t);
                new MobileSelect({
                    trigger: '#listen_type',
                    title: '听课类型',
                    wheels: [
                                {data: t.listen_type}
                            ],
                    callback:function(indexArr, data){
                        $("#listen_type").val(data)
                        getList(true)
                        
                    }
                });
                
                new MobileSelect({
                    trigger: '#dept',
                    title: '请选择部门',
                    wheels: [
                                {data: t.course_units}
                            ],
                    callback:function(indexArr, data){
                        $("#dept").val(data)
                        getList(true)
                        
                    }
                });
                new MobileSelect({
                    trigger: '#type_char',
                    title: '请选择督导类型',
                    wheels: [
                                {data: t.type}
                            ],
                    callback:function(indexArr, data){
                        $("#type_char").val(data)
                        $("#type").val(parseInt(indexArr)+1)
                        getList(true)
                        
                    }
                });
                // var html,html1=''
                // $.each(t.listen_type, function (k, v) { 
                //     html+=`<option value='${v}'>${v}</option>`
                // });
                // $("#listen_type").append(html)


                // $.each(t.course_units, function (k, v) { 
                //     html1+=`<option value='${v}'>${v}</option>`
                // });
                // $("#dept").append(html1)
            }
        });
    }
    </script>
</body>

</html>